<script setup>
import { useUserStore } from '@/stores/modules/user.js'
import { ref } from 'vue'
import { userUpdateUserService } from '@/api/user.js'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const userProfile = ref({ ...userStore.userInfo })

// 用户信息表单
const userForm = ref()
const updateUserInfo = async () => {
  // 用户信息表单验证
  await userForm.value.validate()
  await userUpdateUserService(userProfile.value)
  userStore.setUserInfo(userProfile.value)
  ElMessage.success('更新成功')
}
const rules = {
  email: [
    {
      required: true,
      message: '请输入邮箱地址',
      trigger: 'blur'
    },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change']
    }
  ]
}
</script>

<template>
  <!--  <div style="height: 100%; width: 100%; padding: 20px">-->
  <el-card style="max-width: 100%; min-height: 90%; margin: 20px" shadow="hover">
    <template #header>
      <div class="card-header">
        <strong>个人信息展示</strong>
      </div>
    </template>
    <el-form
      :model="userProfile"
      ref="userForm"
      :label-position="'left'"
      :rules="rules"
      label-width="auto"
      style="max-width: 600px"
    >
      <el-form-item label="用户编号：">
        <el-input disabled class="mx-1" v-model="userProfile.id" />
      </el-form-item>
      <el-form-item label="用户名：">
        <el-input disabled class="mx-1" v-model="userProfile.username"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称：">
        <el-input class="mx-1" v-model="userProfile.nickname"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱：" prop="email">
        <el-input class="mx-1" v-model="userProfile.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateUserInfo">更新</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!--  </div>-->
</template>

<style scoped></style>
